


let zIndex = 10;

const Peng_Select = {
    CreateElement: function (id, data, show, fun, hidden, index) {


        zIndex--;

        const Select_Control = document.getElementById(id);
        Select_Control.style.zIndex = zIndex;
        Select_Control.innerHTML = ` <div class="left_Text">
    <span class="text">option1</span>
    </div>
    <div class="right_Icon">
    <i class="fas fa-angle-down"></i>
    </div>

    <div class="OutOption">
    <div class="Options">

    </div>
    </div>`;






        data.forEach((item, i) => {
            let option = document.createElement("div");
            option.className = "option";


            for (var a in item) {
                if (a == show) {
                    option.innerHTML = item[a];
                }
            }



            option.onclick = function () {
                let options = document.querySelectorAll(`#${id} .option`);


                options.forEach((item) => {
                    item.classList.remove("active");
                });
                option.classList.add("active");

                fun(item);


                let text = Select_Control.querySelector(".left_Text span");
                text.innerHTML = option.innerHTML;
            }



            let Options = Select_Control.querySelector(".OutOption .Options");
            Options.appendChild(option);

        });

        const Select_Options = Select_Control.querySelectorAll(".OutOption .Options .option");

        if (hidden == undefined && index == undefined) {

            Select_Options[0].click();

        } else {
            data.forEach((item,i) => {
                for (var a in item) {
                    if (a == hidden) {
                        if (item[a] == index) {
                            Select_Options[i].click();
                        }                     
                    }
                }
            });
        }



        Select_Control.onclick = function (e) {
            e.stopPropagation();
            if (Select_Control.classList.contains("active")) {
                Select_Control.classList.remove("active");
            } else {
                Select_Control.classList.add("active");
            }



            window.onclick = function () {
                Select_Control.classList.remove("active");

            }

        }





    }
}